window.onload = function () {
    // var canvas = document.getElementById("tshirtCanvas");
    // var context = canvas.getContext("2d");
    // context.fillRect(10, 10, 100, 100);
    var button = document.getElementById("previewButton");
    button.onclick = previewHandler;
    var autoButton = document.getElementById("autoButton");
    autoButton.onclick = autoPreview;
}

function autoPreview() {
    setInterval(previewHandler, 10);

}


function previewHandler() {
    var canvas = document.getElementById("tshirtCanvas");
    var context = canvas.getContext("2d");
    fillBackgroundColor(canvas, context);

    var selectObj = document.getElementById("shape");
    var index = selectObj.selectedIndex;
    var shape = selectObj[index].value;

    if (shape == "squares") {
        for (var squares = 0; squares < 20; squares++) {
            drawSquare(canvas, context);
        }
    } else if (shape == "circles") {
        for (var circles = 0; circles < 20; circles++) {
            drawCircle(canvas, context);
        }
    }
}

function drawSquare(canvas, context) {
    var w = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);

    context.fillStyle = "lightblue";
    // context.fillRect(x, y, w, w);
    context.beginPath();
    context.moveTo(100, 150);
    context.lineTo(250, 75);
    context.lineTo(125, 30);
    context.closePath();
    context.lineWidth = 5;
    context.strokeStyle = 'red';
    context.stroke();
    context.fill();

}

function drawCircle(canvas, context) {
    var radius = Math.floor(Math.random() * 40);
    var x = Math.floor(Math.random() * canvas.width);
    var y = Math.floor(Math.random() * canvas.height);

    context.beginPath();
    context.arc(x, y, radius, 0, degreeToRadians(360), true);
    context.fillStyle = "lightblue";
    context.fill();
}



function fillBackgroundColor(canvas, context) {
    var selectObj = document.getElementById("backgroundColor");
    var index = selectObj.selectedIndex;
    var color = selectObj[index].value
    context.fillStyle = color;
    context.fillRect(0, 0, canvas.width, canvas.height);
}

function degreeToRadians(degree) {
    return (degree * Math.PI)/180;
}

function updateTweets(tweet) {
    var tweetsSelection = document.getElementById("tweets");
}